<template>
  <dialogBase v-if="show" :title="title" @ok="submit" @close="close">
    <form class="addDept">
      <div class="form-item">
        <label class="require" for="user-name">姓名:</label>
        <input id="user-name" v-model="outData.name" type="text" placeholder="姓名">
        <div class="error_text">
          {{ hasError__name }}
        </div>
      </div>
      <div class="form-item">
        <label class="require" for="user-tel">手机:</label>
        <input id="user-tel" v-model="outData.tel" type="text" placeholder="手机号">
        <div class="error_text">
          {{ hasError__tel }}
        </div>
      </div>
      <div class="form-item">
        <label class="require" for="user-email">邮箱:</label>
        <input id="user-email" v-model="outData.email" type="text" placeholder="邮箱">
        <div class="error_text">
          {{ hasError__email }}
        </div>
      </div>
      <div class="form-item">
        <label class="require" for="user-dept">部门:</label>
        <Select
          width="195px"
          v-model="dept"
          placeholder="部门名称">
          <Option
            v-for="item of depts"
            :key="item.key"
            :value="item.key">
              {{ item.value }}
          </Option>
        </Select>
        <div class="error_text">
          {{ hasError__dept }}
        </div>
      </div>
      <div class="form-item">
        <label for="user-desc">描述:</label>
        <textarea
          id="user-desc"
          v-model="outData.desc"
          type="text"
          cols="21"
          rows="10"
          style="padding:5px;box-sizing:border-box;"
          placeholder="描述"></textarea>
        <div class="error_text">
          {{ hasError__desc }}
        </div>
      </div>
      <p class="desc">如果忘记密码，在此处设置新密码</p>
      <div class="form-item">
        <label for="user-psw">新密码:</label>
        <input id="user-psw" v-model="outData.psw" type="password" placeholder="设置新密码">
      </div>
      <div class="form-item">
        <label for="user-psw">确认新密码:</label>
        <input id="user-psw" v-model="psw_confirm" type="password" placeholder="确认新密码">
        <div class="error_text">
          {{ hasError__psw }}
        </div>
      </div>
    </form>
  </dialogBase>
</template>

<script>
import dialogBase from '@/components/Dialogs/base/dialogBase';
import Option from '@/components/select/Option';
import Select from '@/components/select/Select';
import api from '@/api/emplMgn';
import reg from '@/assets/regexp';

export default{
  props: ['dialogData', 'show', 'title'],
  data() {
    return {
      outData: {
        name: '',
        tel: '',
        email: '',
        psw: '',
        desc: '',
      },
      hasError__name: '',
      hasError__tel: '',
      hasError__email: '',
      hasError__psw: '',
      hasError__dept: '',
      hasError__desc: '',
      depts: [],
      dept: '',
      psw_confirm: '',
    };
  },
  watch: {
    dialogData: {
      handler(val) {
        this.resetData(val);
      },
      deep: true,
    },
  },
  mounted() {
    const params = new URLSearchParams();
    params.append('companyId', this.$store.getters['user/getUserInfo'].companyId);
    this.depts = [];
    api.getAllDeptApi(params).then((response) => {
      const datas = response.data.data;
      for (let i = 0; i < datas.length; i += 1) {
        this.depts.push({
          key: datas[i].businessId,
          value: datas[i].name,
        });
      }
    });
  },
  methods: {
    getStrLen(str) {
      // return str.replace(/[\u0391-\uFFE5]/g, 'xx').length;
      return str.length;
    },
    resetData(obj) {
      this.$data.outData = obj || this.outData;
      this.$data.outData.name = this.dialogData.name;
      this.$data.outData.tel = this.dialogData.tel;
      this.$data.outData.email = this.dialogData.email;
      this.$data.outData.psw = this.dialogData.psw;
      this.$data.dept = this.dialogData.dept;
      this.$data.outData.desc = this.dialogData.desc;
    },
    close() {
      this.$emit('close', false);
    },
    submit() {
      let flag = true;
      if (!this.outData.name || this.getStrLen(this.outData.name) > 10) {
        this.hasError__name = '请正确填写，不应该超过10位';
        flag = false;
      } else {
        this.hasError__name = '';
      }
      if (!reg.TEL.test(this.outData.tel)) {
        this.hasError__tel = '手机号格式错误';
        flag = false;
      } else {
        this.hasError__tel = '';
      }
      if (!reg.EMAIL.test(this.outData.email)) {
        this.hasError__email = '邮箱格式错误';
        flag = false;
      } else {
        this.hasError__email = '';
      }
      if (!this.dept) {
        this.hasError__dept = '请选择部门';
        flag = false;
      } else {
        this.hasError__dept = '';
      }
      if (!this.outData.psw !== this.psw_confirm && this.outData.psw) {
        this.hasError__psw = '两次密码输入不一致';
        flag = false;
      } else {
        this.hasError__psw = '';
      }
      if (!flag) return;
      this.$emit('done', {
        ...this.outData,
        dept: this.dept,
      });
    },
  },
  components: {
    dialogBase,
    Select,
    Option,
  },
};
</script>
<style lang="less">
  .addDept{
    .desc {
      font-size: 12px;
      padding-right: 45px;
    }
    .form-item {
      position: relative;
      margin: 20px 10px;
      flex-wrap: wrap;
      label {
        width: 75px;
        text-align: right;
        &.require::before {
          color: red;
          content: '*';
          font-size: 7px;
          position: absolute;
          top: 3px;
          left: 36px;
          font-weight: lighter;
        }
      }
      .select-box {
        margin: 0;
      }
      .error_text {
        position: absolute;
        top: 29px;
        left: 228px;
        width:195px;
        margin-right:6px;
        text-align:left;
        color:red;
        font-size: 12px;
      }
    }
  }
</style>
